/*封装$*/
window.$=HTMLElement.prototype.$=function(selector){
    var elems=(this==window?document:this)
        .querySelectorAll(selector);
    return elems.length==0?null:elems.length==1?elems[0]:elems;
}
//封装bind函数
HTMLElement.prototype.bind=function(eName,fn,capture){
	this.addEventListener(eName,fn,capture);
}
//css
HTMLElement.prototype.css=function(prop,value){
		if (value===undefined){
			var style=getComputedStyle(this);
			return style[prop];
		}else{
			this.style[prop]=value;
		}
}
/*广告图片数组*/
var imgs=[
	{"src":"homepage_images/banner_01.jpg"},
    {"src":"homepage_images/banner_02.jpg"},
    {"src":"homepage_images/banner_03.jpg"},
    {"src":"homepage_images/banner_04.jpg"},
	{"src":"homepage_images/banner_05.jpg"}
];
var adv={
	LIWIDTH:0,//保存每个li的宽度
	DISTANCE:0,//总距离
	DURATION:500, //总时间
	STEPS:200,  //总步数
	interval:0, //步频
	step:0,  //步长
	moved:0, //本次动画已经移动的步数
	timer:null, //保存定时器序号
	WAIT:2000,//自动轮播等待时间
	canAuto:true,//标识能否启动自动轮播
	init:function(){
		//获得id为banner的宽 转为浮点数 保存在LIWIDTH中
		this.LIWIDTH=parseFloat($("#banner").css("width"));
		this.updateView();//调用更新
		this.interval=this.DURATION/this.STEPS;
		//找到id为forwards开始的a元素，绑定单击事件为move，提前绑定this为当前对象
		$("#forwards").bind("click",this.moveRight.bind(this));
		//找到id为backwards开始的a元素，绑定单击事件为move，提前绑定this为当前对象
		$("#backwards").bind("click",this.moveLeft.bind(this));
		this.autoMove();
		$("#banner").bind("mouseover",function(){this.canAuto=false}.bind(this));
		$("#banner").bind("mouseout",function(){this.canAuto=true}.bind(this));
	},
	updateView:function(){  //根据数组更新界面
		//清空id为imgs的ul的内容
		$("#imgs").innerHTML="";
		//创建文档片段fragImgs
		var fragImgs=document.createDocumentFragment();
		//遍历imgs中每个img
		for (var i=0;i<imgs.length;i++)
		{
			//创建li
			var li=document.createElement("li");
			//新建img
			var img=new Image();
			//设置img的src属性为当前元素的src属性
			img.src=imgs[i].src;
			//将img追加到li下
			li.appendChild(img);
			//将li追加到fragImgs下
			fragImgs.appendChild(li);
		}
		//将fragImgs追加到id为imgs的ul下
		$("#imgs").appendChild(fragImgs);
		//设置id为imgs的ul的宽为imgs的元素个数*LIWIDTH+"px"
		$("#imgs").css("width",imgs.length*this.LIWIDTH+"px");
	},
	moveLeft:function(){
		//防止动画叠加
		clearInterval(this.timer);
		this.timer=null;
		//计算DISTANCE:LIWIDTH
		this.DISTANCE=this.LIWIDTH;
		//计算step:DISTANCE/STEPS
		this.step=this.DISTANCE/this.STEPS;
		imgs=imgs.splice(imgs.length-1).concat(imgs);
		this.updateView();
		$("#imgs").css("left",-this.LIWIDTH+"px");	
		this.timer=setInterval(this.moveLeftStep.bind(this),this.interval);},
	moveRight:function(){
		//防止动画叠加
		clearInterval(this.timer);
		this.timer=null;
				
		//计算DISTANCE:LIWIDTH
		this.DISTANCE=this.LIWIDTH;
		//计算step:DISTANCE/STEPS
		this.step=this.DISTANCE/this.STEPS;
		this.timer=setInterval(this.moveRightStep.bind(this,function(){
						imgs=imgs.concat(imgs.splice(0,1));
						this.updateView(); 
						$("#imgs").css("left","");
					}.bind(this)),
					this.interval);
	},
	moveRightStep:function(callback){ //向右移动一步
		//获取id为imgs的ul的left 转为浮点数 减去step步长 保存回去
		$("#imgs").css("left",parseFloat($("#imgs").css("left"))-this.step+"px");
		//将moved+1 即已移动的步数加1
		this.moved++;
		//如果moved=STEPS 已移动的步数等于总步数就停止计时器
		if (this.moved==this.STEPS)
		{
			clearInterval(this.timer);
			this.timer=null;
			this.moved=0;
			callback&&callback();//回调函数 如果callback不是undefined就执行callback函数
			//清除left 防止舍入误差
			$("#imgs").css("left","");
			this.autoMove();
		}
	},
	moveLeftStep:function(){ //向左移动一步
		$("#imgs").css("left",parseFloat($("#imgs").css("left"))+this.step+"px");
		this.moved--;
		if (this.moved==-this.STEPS)
		{
			clearInterval(this.timer);
			this.timer=null;
			this.moved=0;
			//清除left  防止舍入误差
			$("#imgs").css("left","");
			this.autoMove();
		}
	},
	autoMove:function(){
		//启动一次性定时器，将序号保存在timer中
			//任务为move，提前绑定this
		this.timer=setTimeout(function(){
				if (this.canAuto){this.moveRight();}else{this.autoMove();}
			}.bind(this),this.WAIT);
	}
}
adv.init();

//上下轮播

